<template>
    <div class="on">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 10px;">
        <el-input class="keyword"
                  placeholder="搜索用户"
                  v-model="input"
                  clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 5px;" @click="getAllUserMessage">搜索</el-button>
    </div>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width:1200px"
            @selection-change="handleSelectionChange"
            @expand-change="open">
<!--        <el-table-column-->
<!--                type="selection"-->
<!--                width="55">-->
<!--        </el-table-column>-->
        <el-table-column
                label="序号"
                width="50"
        type="index">
        </el-table-column>
        <el-table-column
                label="头像"
                width="120" >
            <template scope="scope">
                <img :src="'http://localhost:8080/static/uploadImages/'+scope.row.face" style="border-radius: 8px;width: 50px;height:50px;"/>
            </template>
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="email"
                label="Email"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="50">
        </el-table-column>
        <el-table-column
                prop="national"
                label="民族"
                width="120">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="出生日期"
                show-overflow-tooltip
                sortable>
        </el-table-column>
        <el-table-column
                prop="enrollTime"
                label="注册日期"
                show-overflow-tooltip
                sortable>
        </el-table-column>
        <el-table-column type="expand" >
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand" style="margin-left: 110px;">
                    <el-form-item label="所学专业:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>所学专业</span></label>
                        <span>{{userMessage.major}}</span>
                    </el-form-item>
                    <el-form-item label="QQ号码:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>QQ号码</span></label>
                        <span>{{ userMessage.qq }}</span>
                    </el-form-item>
                    <el-form-item label="婚姻状况:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>婚姻状况</span></label>
                        <span>{{ userMessage.marriage}}</span>
                    </el-form-item>
                    <el-form-item label="现居住地:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>现居住地</span></label>
                        <span>{{ userMessage.nowIn}}</span>
                    </el-form-item>
                    <el-form-item label="籍贯:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>籍贯</span></label>
                        <span>{{ userMessage.nativePlace}}</span>
                    </el-form-item>
                    <el-form-item label="政治面貌:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>政治面貌</span></label>
                        <span>{{ userMessage.politicalLandscape}}</span>
                    </el-form-item>
                    <el-form-item label="求职状态:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>求职状态</span></label>
                        <span>{{ userMessage.jobStatus.jobStatusInfo}}</span>
                    </el-form-item>
                    <div>
                    <el-form-item label="个人详细信息:">
                        <label slot="label" style="color: #277af8;font-size: 15px;"><span>个人详细信息</span></label>
                        <span>{{ userMessage.introduction}}</span>
                    </el-form-item>
                    </div>
                    <div>
                    <el-form-item label="技能:">
                        <label slot="label"  style="color: #277af8;font-size: 20px;"><span>技能</span></label>
                        <span v-for="technologies in userMessage.technologies" style="margin-right: 5px;"><el-tag>{{technologies.technologyLabel}}</el-tag></span>
                    </el-form-item>
                    </div>
<!--                    <div>-->
<!--                    <el-form-item label="求职意向:">-->
<!--                        <label slot="label" style="color: #277af8;font-size: 20px;"><span>求职意向</span></label>-->
<!--&lt;!&ndash;                        <el-form-item v-for="jobOrientation in userMessage.jobOrientations[0]" label="期望职位类型："><span>{{jobOrientation.positionType.typeName}}</span></el-form-item>&ndash;&gt;-->
<!--                    </el-form-item>-->
<!--                    </div>-->
                    <div>
                        <el-form-item label="工作经验">
                        <label slot="label" style="color: #277af8;font-size: 20px;">
                            <span>工作经验</span>
                        </label>
                        <el-timeline style="margin-top: 5px;" reverse="true">
                            <el-timeline-item  timestamp="" placement="top" v-for="workExperience in userMessage.workExperiences">
                                <slot name="timestamp">{{workExperience.inServiceTime}} - {{workExperience.outServiceTime}}</slot>
                                <el-card>
                                    <p><strong>职位名称:</strong>{{workExperience.name}}</p>
                                    <p><strong>公司名称:</strong>{{workExperience.companyName}}</p>
                                    <p><strong>工作描述:</strong>{{workExperience.jobDescription}}</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="教育和培训经历">
                            <label slot="label" style="color: #277af8;font-size: 20px;">
                                <span>教育和培训经历</span>
                            </label>
                            <el-timeline style="margin-top: 5px;" reverse="true">
                                <el-timeline-item timestamp="" placement="top" v-for="educationalExperience in userMessage.educationalExperiences">
                                    <slot name="timestamp">{{educationalExperience.beginTime}} - {{educationalExperience.endTime}}</slot>
                                    <el-card>
                                        <p><strong>学校名称:</strong>{{educationalExperience.schoolName}}</p>
                                        <p><strong>工作描述:</strong>{{educationalExperience.introduction}}</p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="50">
            <template slot-scope="scope">
                <!--                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
                <!--                    <el-button type="text" size="small">编辑</el-button>-->
<!--                <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="getUserOtherMessages(scope.row.id)"></el-button>-->
                <el-button type="danger" icon="el-icon-close" circle size="mini" @click="dialogOn(scope.row.id)"></el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-dialog
                    title="确认操作"
                    :visible.sync="dialogVisible"
                    width="30%"
                    >
                <span><i class="el-icon-warning" style="color:dodgerblue;width: 20px;font-size: 20px;"></i>&nbsp;&nbsp;您确定要封禁该用户吗？</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateUserEnable">确 定</el-button>
                </span>
        </el-dialog>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="handlePageChange"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "userMessageList",
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                pageInfo:{},
                input:'',
                pageNum:1,
                userMessage:{},
                dialogVisible: false,
                updateUserId:0,
            }
        },
        created() {
            this.getAllUserMessage();
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getAllUserMessage(){
                this.$axios.get("/manage/getAllUserMessage",{params:{pageNum: this.pageNum,keyword:this.input}}).then(response=>{
                    console.log(response.data);
                    this.pageInfo = response.data.data;
                    this.tableData = this.pageInfo.list;
                })
            },
            open(row){
                this.$axios.get("/manage/getUserOtherMessage",{params: {userId:row.id}}).then(response=>{
                    console.log(response.data);
                    this.userMessage = response.data.data;
                })
            },
            //弹出对话框
            dialogOn(id){
                this.dialogVisible=true;
                this.updateUserId = id;
            },
            //封禁用户
            updateUserEnable(){
                this.$axios.get("/manage/updateUserEnable",{params:{userId: this.updateUserId}}).then(response=>{
                    this.dialogVisible=false;
                    console.log(response);
                    this.getAllUserMessage();
                    this.$message({
                            message: response.data.msg,
                            type: 'success'
                    });
                })
            },
            //改变页码
            handlePageChange(pageNum){
                this.pageNum = pageNum;
                this.getAllHrMessage();
            },
        }
    }
</script>

<style scoped>
    .on{
        margin-top: 30px;
        margin-left: 30px;
        width: 100%;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .keyword{
        margin-top: 10px;
        margin-left: 900px;
        width: 200px;
    }
</style>